<template>
  <div
    :id="id"
    :style="{
      width: width,
      height: height
    }"
    v-echart-resize
  ></div>
</template>

<script setup>
import { defineProps, onMounted, onUnmounted, ref, watch } from 'vue'
import * as echarts from 'echarts'
import { unwarp } from '@/utils/commUtils'

const props = defineProps({
  id: {
    type: String,
    default: ''
  },
  title: {
    type: String,
    default: '耗电量'
  },
  width: {
    type: String,
    default: '100%'
  },
  height: {
    type: String,
    default: '100%'
  }
})
const chart = ref(null)

const setOptions = (title) => {
  const xLabel = [
    '1日',
    '2日',
    '3日',
    '4日',
    '5日',
    '6日',
    '7日',
    '8日',
    '9日',
    '10日',
    '11日',
    '12日',
    '13日',
    '14日',
    '15日',
    '16日',
    '17日',
    '18日',
    '19日',
    '20日',
    '21日'
  ]
  const data1 = [
    '40',
    '60',
    '22',
    '85',
    '50',
    '40',
    '20',
    '50',
    '12',
    '65',
    '30',
    '60',
    '10',
    '30',
    '32',
    '65',
    '20',
    '40',
    '20',
    '53',
    '22'
  ]
  const data2 = [
    '20',
    '50',
    '12',
    '55',
    '30',
    '61',
    '32',
    '25',
    '37',
    '40',
    '16',
    '32',
    '45',
    '33',
    '60',
    '19',
    '22',
    '65',
    '50',
    '40',
    '30'
  ]
  const option = {
    // backgroundColor: '#0e1c47',
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'transparent',
      axisPointer: {
        lineStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: 'rgba(229, 169, 53, 0.2)' // 0% 处的颜色
              },
              {
                offset: 0.5,
                color: 'rgba(205, 116, 22, 1)' // 100% 处的颜色
              },
              {
                offset: 1,
                color: 'rgba(191, 72, 20, 1)' // 100% 处的颜色
              }
            ],
            global: false // 缺省为 false
          }
        }
      },
      formatter: (p) => {
        const dom = `<div style="width: 79px;
	height: 50px;color:#fff;position: relative;">
        <svg style="position: absolute;top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);" class="svg" xmlns="http://www.w3.org/2000/svg" width="100" height="71" viewBox="0 0 84 55">
      <defs>
        <style>
          .cls-1 {
            fill: #07172c;
            fill-opacity: 0.8;
            stroke: #a7d8ff;
            stroke-linejoin: round;
            stroke-opacity: 0.2;
            stroke-width: 1px;
            fill-rule: evenodd;
          }

        </style>
      </defs>
      <path id="矩形_419" data-name="矩形 419" class="cls-1" d="M266,595h74v50H266V624.046L261,620l5-3.984V595Z"
        transform="translate(-258.5 -592.5)" />
    </svg>
        <div style="padding: 4px 8px 4px 14px;display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;position: relative;z-index: 1;">
            <div style="margin-bottom: 4px;width:100%;display:${
              p[0] ? 'flex' : 'none'
            };justify-content:space-between;align-items:center;">
                <span style="font-size:14px;color:#B84313;">${
                  p[0] ? p[0].seriesName : ''
                }</span>
                <span style="font-size:14px;color:#fff;">${
                  p[0] ? p[0].data : ''
                }</span>
            </div>
            <div style="width:100%;height:100%;display:${
              p[1] ? 'flex' : 'none'
            };justify-content:space-between;align-items:center;">
                <span style="font-size:14px;color:#D07B19;">${
                  p[1] ? p[1].seriesName : ''
                }</span>
                <span style="font-size:14px;color:#fff;">${
                  p[1] ? p[1].data : ''
                }</span>
            </div>
        </div>
    </div>`
        return dom
      }
    },
    legend: {
      align: 'left',
      right: '10%',
      top: 0,
      type: 'plain',
      textStyle: {
        color: '#FEFEFE',
        fontStyle: 'italic',
        fontSize: 10
      },
      icon: 'circle',
      itemGap: 25,
      itemWidth: 18,
      data: [
        {
          name: title === '耗电量' ? '上月' : '充电时间'
        },
        {
          name: title === '耗电量' ? '本月' : '输出电量'
        }
      ]
    },
    grid: {
      top: '20%',
      left: '10%',
      right: '10%',
      bottom: '15%'
      // containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        axisLine: {
          //坐标轴轴线相关设置。数学上的x轴
          show: true,
          lineStyle: {
            color: '#233653'
          }
        },
        axisLabel: {
          //坐标轴刻度标签的相关设置
          textStyle: {
            color: 'rgba(255, 255, 255, 0.4)',
            padding: 8,
            fontSize: 10
          },
          formatter: function (data) {
            return data
          }
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: '#192a44'
          }
        },
        axisTick: {
          show: false
        },
        data: xLabel
      }
    ],
    yAxis: [
      {
        name: title === '耗电量' ? title + '/kw' : '',
        nameTextStyle: {
          color: '#FFFFFF',
          fontSize: 10,
          padding: 10,
          fontStyle: 'italic'
        },
        min: 0,
        splitLine: {
          show: true,
          lineStyle: {
            color: '#192a44'
          }
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: 'RGBA(229, 169, 53, 1)',
            width: 2
          }
        },
        axisLabel: {
          show: true,
          textStyle: {
            color: 'rgba(255, 255, 255, 0.4)',
            padding: 8,
            fontSize: 14
          },
          formatter: function (value) {
            if (value === 0) {
              return value
            }
            return value
          }
        },
        axisTick: {
          show: false
        }
      }
    ],
    series: [
      {
        name: title === '耗电量' ? '上月' : '充电时间',
        type: 'line',
        symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
        showAllSymbol: true,
        symbolSize: 0,
        smooth: true,
        lineStyle: {
          normal: {
            width: 0,
            color: 'rgba(25,163,223,1)' // 线条颜色
          },
          borderColor: 'rgba(0,0,0,.4)'
        },
        itemStyle: {
          color: '#B84313',
          borderColor: '#B84313',
          borderWidth: 2
        },
        tooltip: {
          show: true
        },
        areaStyle: {
          //区域填充样式
          normal: {
            //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: 'rgba(229, 169, 53, 0.2)'
                },
                {
                  offset: 1,
                  color: 'rgba(205, 116, 22, 1)'
                }
              ],
              false
            ),
            shadowColor: 'rgba(229, 169, 53, 0.5)', //阴影颜色
            shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
          }
        },
        data: data1
      },
      {
        name: title === '耗电量' ? '本月' : '输出电量',
        type: 'line',
        symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
        showAllSymbol: true,
        symbolSize: 0,
        smooth: true,
        lineStyle: {
          normal: {
            width: 0,
            color: 'rgba(10,219,250,1)' // 线条颜色
          },
          borderColor: 'rgba(0,0,0,.4)'
        },
        itemStyle: {
          color: '#D07B19',
          borderColor: '#D07B19',
          borderWidth: 2
        },
        tooltip: {
          show: true
        },
        areaStyle: {
          //区域填充样式
          normal: {
            //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: 'rgba(229, 169, 53, 0)'
                },
                {
                  offset: 1,
                  color: 'rgba(191, 72, 20, 1)'
                }
              ],
              false
            ),
            shadowColor: 'rgba(229, 169, 53, 0.5)', //阴影颜色
            shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
          }
        },
        data: data2
      }
    ]
  }
  unwarp(chart.value).setOption(option)
}

const initChart = () => {
  setTimeout(() => {
    if (!chart.value) {
      chart.value = echarts.init(document.getElementById(props.id))
    }
    setOptions(props.title)
  }, 0)
}

onMounted(() => {
  initChart()
})

onUnmounted(() => {
  if (!chart.value) {
    return
  }
  chart.value.dispose()
  chart.value = null
})

watch(
  () => props.count,
  () => {
    setOptions(props.title)
  }
)
</script>

<style lang="scss" scoped>
</style>
